<template>
  <div>
    <el-container>
      <el-aside :width="asideWidth">
        <LeftMenus></LeftMenus>
      </el-aside>
      <el-container>
        <el-header class="Header">
          <Header></Header>
        </el-header>
        <el-main class="Main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'

import { headerStore } from '../../store/head'

import LeftMenus from './leftmenu/index.vue'
import Header from './header/index.vue'
export default defineComponent({
  components: {
    LeftMenus,
    Header
  },
  setup() {
    const headerstore = headerStore()
    const asideWidth = computed(() => {
      return headerstore.iscol ? '240px' : '60px'
    })
    return {
      asideWidth
    }
  }
})
</script>

<style lang="scss" scoped>
$bj: #ffffff;
.Header {
  height: 49px;
  background-color: $bj;
}
.Main {
  height: calc(100vh - 49px);
  background-color: $bj;
}
.el-aside {
  transition: width 0.15s;
  -webkit-transition: width 0.15s;
  -moz-transition: width 0.15s;
  -webkit-transition: width 0.15s;
  -o-transition: width 0.15s;
}
</style>
